<template>
  <div id="lineChart">
    <a id="myButton1" href="#" @click="moreMsg">more</a>
    <Echart :options="options" height="80%" width="90%"></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  components: { Echart },
  data() {
    return {};
  },
  props: {
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(value) {
        this.options = value;
      },
    },
  },
  methods: {
    moreMsg() {
      console.log("点击了");
      // 使用 window.open() 打开新标签页
      const url = this.$router.resolve({ path: "/more" }).href;
      window.open(url, "_blank");
    },
  },
};
</script>
<style scoped>
#lineChart {
  display: flex; /* 启用 Flexbox 布局 */
  flex-direction: column; /* 设置为垂直排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 250px; /* 设置容器高度 */
  width: 100%; /* 设置容器宽度，确保它能填满父容器 */
}
#myButton1 {
  font-size: 80%;
  background-color: black;
  color: bisque;
  margin-left: 80%;
}
</style>